<html>
<head>
    <title>模板解析引擎</title>
</head>
<body>
    
    <script>
        /*
            `<div>{{name}}</div>`
            `<div>{{obj.name}}</div>`
            `<div>{{department}}-{{obj.name}}-{{obj.age}}</div>`
            解析值： obj[key] 需要取出key
            核心：取出key值，然后替换

            `
            <div v-for="item in items">
                <div>{{item.img}}</div>
                <div>{{item.title}}</div> 
            </div>
            `

            `
            <div v-for="item in items">
                <div><img src="{{item.img}}" /></div>
                <div>{{item.title}}</div> 
            </div>
            `
            这里如何处理层级的值呢？
            `
            <div>
                <div v-if="{{item.isShowImg}}"><img src="{{item.img}}" /></div>
                <div v-if="{{item.isShowTitle}}">{{item.title}}</div> 
                <div>{{item.desc}}</div>
            </div>
            `
        */
        function MarkKeyHanlder() {
            this.tirmAndDeleteBracket = function (str) {
                return str.trim().replace(/\{\{/mg, '').replace(/\}\}/mg, '').replace(/\s*/mg, '')
            }
            this.getKeyArr = function (str) {
                if (str === '') return []
                if (!str.includes('.')) return [str]
                return str.split('.')
            }
            this.getKeyVal = (keys, data) => {
                if (keys.length === 0) return undefined;
                let val = data;
                for (let i = 0; i < keys.length; i++) {
                    const curKey = keys[i];
                    if (val.hasOwnProperty(curKey)) {
                        val = val[curKey];
                    } else {
                        return undefined;
                    }
                }
                return val;
            }
            this.getRst = function (markStr, data) {
                const str = this.tirmAndDeleteBracket(markStr);
                const keys = this.getKeyArr(str);
                return this.getKeyVal(keys, data);
            }
        }

        function Engine () {
            // 最终html
            this.render = function () {

            }
            // <div>{{key}}</div>
            // <img src="{{key}}" />
            this.regBracketMark = function (str, obj) {
                const reg = /(\{\{[^}]*\}\})/mg;
                return str.replace(reg, function (match, $1) {
                    var keyHanlder = new MarkKeyHanlder();
                    var val = keyHanlder.getRst($1, obj);
                    return val
                })
            }
            this.regPairTagHanlder = function () {
                const reg = /<\w+\s+([^>]+)>[^<]/
            }
            this.regSingleTagHanlder = function () {

            }

            // 正则提取
            this.replaceHanlder = function (tpl, data) {
                tpl.replace(/xx/, function () {
                    // markKeyHanlder 处理标识匹配键值

                })
            }
        }
    </script>
</body>
</html>